<template>
	<view class="region-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="region-list">
			<view class="region-item" v-for="(item,index) in list" :key="index">
				<view class="name">{{item.title}}</view>
				<view class="desc">客户数量:{{ item.region_customer_num }}</view>

				<view class="btn-group">
					<u-button class="btn" type="success" size="mini" plain
						@click="pageRoute('/merchantPages/region-manage/customer?id='+item.id+'&region_name='+item.title)">区域客户</u-button>
					<u-button class="btn" size="mini"
						@click="pageRoute('/merchantPages/region-manage/region-form?id='+item.id)">编辑</u-button>
					<u-button class="btn" type="error" size="mini" plain @click="del(item.id)">删除</u-button>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂无区域数据</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button class="btn" type="primary" size="large" block
					@click="pageRoute('/merchantPages/region-manage/region-form')">添加区域</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '区域管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		store_id: 0,
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		let selStore = cache.get('selStore');
		if (selStore) {
			state.store_id = selStore.id;
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			id: 1,
			title: '金鼎山片区',
			region_customer_num: 2
		}, {
			id: 2,
			title: '金马片区',
			region_customer_num: 0
		}]
	}

	function del(id) {
		console.log('删除区域');
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		store_id,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.region-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.region-list {
			padding-bottom: 100rpx;

			.region-item {
				padding: $m24;
				margin: 0 0 $m24 0;
				background: #fff;

				.name {
					color: $main-color;
					font-weight: 500;
					font-size: $font-32;
				}

				.desc {
					margin: 10rpx 0;
					font-size: $font-24;
					color: $tips-color;
				}

				.btn-group {
					display: flex;
					justify-content: flex-end;

					:deep(.u-button) {
						min-width: 132rpx;
						margin-left: $m20;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {
				.btn {}
			}
		}
	}
</style>